<template>
	<view style="background: rgb(245, 245, 245);padding-top: 15rpx;">
		<view class="container">
			<view class="leftcell">
				<view class="bigbox" v-for="(item,index) in listdata" :key="index">
					<view v-if="index == 0" class="dot"></view>
					<view v-if="index == 1" class="dots"></view>
					<view v-if="index == 2" class="dots"></view>
					<view v-if="index == 3" class="dots"></view>
					<view v-if="index == 4" class="dots"></view>
					<!-- 外层盒子 -->
					<view class="minibox">
						<view class="topbox">
							<view class="text">{{item.statusDesc}}</view>
							<view class="time">{{item.dateline}}</view>
						</view>
						<view class="bottombox" v-if="item || item.content || item.worker_name || item.worker_phone || item.score">
							<view v-if="item.status == 0 && item.content" class="content">
								任务描述：<text style="color: #2681F3;">{{item.content}}</text>
							</view>
							<view v-if="item.status == 1 && item.worker_name" class="content">
								指派给工作人员：<text style="color: #2681F3;">{{item.worker_name}}</text>
							</view>
							<view v-if="item.status == 1 && item.worker_phone" class="content">
								工作人员人员电话：<text style="color: #2681F3;" @tap="tel_phone(item.worker_phone)">{{item.worker_phone}}</text>
							</view>
							<view v-if="item.status == 2 && item.worker_name" class="content">
								受理人员姓名：<text style="color: #2681F3;">{{item.worker_name}}</text>
							</view>
							<view v-if="item.status == 2 && item.worker_phone" class="content">
								受理人员电话：<text style="color: #2681F3;" @tap="tel_phone(item.worker_phone)">{{item.worker_phone}}</text>
							</view>
							<view v-if="item.status == 2 && item.content" class="content">
								受理描述：<text style="color: #2681F3;">{{item.content}}</text>
							</view>
							<view v-if="item.status == 3 && item.worker_name" class="content">
								处理人员姓名：<text style="color: #2681F3;">{{item.worker_name}}</text>
							</view>
							<view v-if="item.status == 3 && item.worker_phone" class="content">
								处理人员电话：<text style="color: #2681F3;" @tap="tel_phone(item.worker_phone)">{{item.worker_phone}}</text>
							</view>
							<view v-if="item.status == 3 && item.content" class="content">
								处理描述：<text style="color: #2681F3;">{{item.content}}</text>
							</view>
							<view v-if="item.status == 4 && item.score" class="content">
								评分：<text style="color: #2681F3;">{{item.score}}</text>
							</view>
							<view v-if="item.status == 4 && item.content" class="content">
								评论详情：<text style="color: #2681F3;">{{item.content}}</text>
							</view>
							<view v-if="item.status == 99 && items.content" class="content" v-for="(items,indexs) in item.follow_list">
								<view>{{items.add_time}}：<text style="color: #2681F3;">{{items.content}}</text></view>
							</view>
							<view class="imgarr" v-if="item.status == 3 || item.status == 4 || item.status == 0">
								<view class="imgbox" v-for="(items,indexs) in item.picArr" :key="indexs">
									<image :src="items" class="img-icon" @click="previewimage(items)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-pry-box">
			<button v-if="comment == 3" :style="btn_style" type="primary" class="btn-pry" @tap="uPublishTap">评论</button>
		</view>
	</view>
	
</template>

<script>
	import uniFab from '../component/uni-fab/uni-fab.vue';
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getwaterReportdetailds = () => {
		common.post('HouseApi&a=village_my_utilities_detail_new', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			id: _this.id,
		}, data => {
			console.log("nnnnnnn", data)
			_this.listdata = data.logs;
			_this.comment = data.repair_status;
			_this.repair_id = data.repair_id;
			for(var i in _this.listdata){
				if(_this.listdata[i].status == 0 || _this.listdata[i].status == 3 || _this.listdata[i].status == 4){
					_this.picArr = _this.picArr.concat(_this.listdata[i].picArr)
				}
			}
			
			uni.stopPullDownRefresh();
		});
	}
	export default {
		data() {
			return {
				userInfo:{avatar: '../../../static/images/return-top.png', nickname: '昵称'},
				listdata: [],
				village_id:0,
				pigcms_id:0,
				fab_content: [],
				fab_pattern:{},
				id:0,
				comment: 0,
				repair_id:0,
				actcolor:'',
				btn_style:'',
				picArr:[],
				first_load:true,
			}
		},
		onPullDownRefresh() {
			getwaterReportdetailds();
		},
		onShow: function(){
			if(_this.first_load == false){
				getwaterReportdetailds();
			}
		},
		onLoad: function(options) {
			_this = this;
			_this.id = options.id;
			
			common.setMainColor(_this, function(config) {
				_this.actcolor = app.globalData.config.config.mobile_head_color;
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor + ';';
				_this.fab_pattern = {
					buttonColor: app.globalData.config.config.mobile_head_color
				}
				if (app.globalData.tabBar && app.globalData.tabBar.list) {
					_this.fab_content = app.globalData.tabBar.list;
				}
				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getwaterReportdetailds();
				_this.first_load = false;
			});
		},
		methods: {
			tel_phone(phone) {
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			previewimage(url){
				uni.previewImage({
					current: url,
					urls: _this.picArr,
					success: function(res) {
						console.log('success', res)
					},
					fail: function(fail) {
						console.log('fail', fail)
					}
				})
			},
			uPublishTap(){
				uni.navigateTo({
					url:'/pages/village/my/repairComment?id=' + _this.repair_id
				})
			},
			trigger(param) {
				var url = param.item.pagePath;
				if (_this.village_id) {
					url = common.changeURLArg(url, 'village_id', _this.village_id);
				}
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}
				console.log('tabbar url', url);
				common.parseUrl(url, '', false, param.item.text);
			},
		},
		components: {
			uniFab
		},
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.container {
		margin: 0;
		padding: 0;
		display: flex;
		width: 100%;
		flex-direction: row;
		overflow: hidden;
		background: #FFFFFF;
	}
	.leftcell {
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: 180rpx;
		margin-left: 50rpx;
		border-left: 4rpx solid #f8fafc;
	}
	.bigbox {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		margin-top: 30rpx;
	}
	.dot {
		width: 10rpx;
		height: 10rpx;
		border: 10rpx solid #6ca5ff;
		border-radius: 15rpx;
		margin-left: -18rpx;
		flex-shrink: 0;
		margin-top: 45rpx;
	}
	.dots {
		width: 10rpx;
		height: 10rpx;
		border: 10rpx solid #CCCCCC;
		border-radius: 15rpx;
		margin-left: -18rpx;
		flex-shrink: 0;
		margin-top: 45rpx;
	}
	.minibox {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		justify-content: space-between;
		box-shadow: 0px 4rpx 13rpx 0rpx rgba(108, 165, 255, 0.14);
		border-radius: 20rpx;
		margin: 0 30rpx;
	}
	.topbox {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		background: rgb(248, 250, 252);
	}
	.text {
		font-size: 36rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #333333;
		margin-left: 20rpx;
	}
	.time {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0rpx;
		color: #aeaeae;
		margin-right: 20rpx;
	}
	.bottombox {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background: #FFFFFF;
		padding: 20rpx 0rpx;
		border-radius: 20rpx;
	}
	.content {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 50rpx;
		letter-spacing: 0rpx;
		color: #999999;
		margin-bottom: 5rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
	}
	.imgarr {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		
	}
	.imgbox {
		width: 200rpx;
		height: 200rpx;
	}
	.imgbox {
		margin-left: 20rpx;
	}
	.img-icon {
		width: 100%;
		height: 100%;
	}
	.btn-pry-box{
		position: fixed;
		bottom: 0rpx;
		width:100%;
		background-color:white;
	}
	.btn-pry {
		width:100%;
		background:rgba(6,193,174,1);
		line-height: 98rpx;
		border-radius: 0;
		margin-bottom: 0rpx;
		margin-bottom: calc(0rpx + constant(safe-area-inset-bottom));
		margin-bottom: calc(0rpx + env(safe-area-inset-bottom));
	}
</style>
